<template>
	<view class="my">
		<view class="my-title">
			<view class="my-title-info">
				<uni-list :border="false" style="position: relative;">
					<uni-list-item :border="false" v-if="hotelData.loin">
						<!-- 自定义 header -->
						<!-- <view slot="header" class="slot-box" @click="setClick('material')">
							<image class="slot-main-image" :src="hotelData.avatar[0]"></image>
						</view> -->
						<!-- 自定义 body -->
						<view slot="body" class="slot-main">
							<view style="display: flex;justify-content: space-between;" v-if="isAdd">
								<view class="ellipsis1" style="flex: 1;">
									<view class="slot-main-name ellipsis1">
										{{HoList[active].hotel_name}}
									</view>
									<view class="slot-main-shouquan ellipsis1">
										<view class="slot-main-score ellipsis1">{{HoList[active].address || ''}}</view>
										<!-- <view class="shouquan">
											<text @click="openClick"
												v-if="hotelData.state == 2 && !hotelData.wxopenid">授权获取实时消息</text>
											<uni-icons class=" iocn" type="right" color="#fff" size="28r"></uni-icons>
										</view> -->
									</view>
								</view>
								<view class="cut-btn" @tap="isXuan = !isXuan" v-if="!isXuan">
									切换 >
								</view>
								<view class="cut-btn" @tap="isXuan = !isXuan" v-if="isXuan">
									收起 >
								</view>
							</view>
							<view class="add-new" v-if="!isAdd" @tap="addShop('enterprise')">
								新增门店
							</view>
						</view>
					</uni-list-item>
					<uni-list-item :border="false" v-else>
						<!-- 自定义 header -->
						<!-- <view slot="header" class="slot-box">
							<image class="slot-main-image" :src="imgUrl3"></image>
						</view> -->
						<!-- 自定义 body -->
						<view slot="body" class="slot-main">
							<button class='but' type='primary' withCredentials="true" lang="zh_CN"
								@click="loinClick">登录/注册 ></button>
						</view>
					</uni-list-item>
					
				</uni-list>
			</view>
		</view>
		<view class="xuan-box" v-if="isXuan">
			<view style="flex: 1;" @tap="isXuan = false"></view>
			<view class="xuan-small">
				<view v-for="(item,index) in HoList" :key="index" class="xuan-item" @tap="cut(index)">
					<view class="quan" :class="active==index?'active':''">
						<view class="dian" v-if="active==index"></view>
					</view>
					<view class="xuan-title ellipsis1">
						{{item.hotel_name}}
						<view class="xuan-address ellipsis1">{{item.address}}</view>
					</view>
					<view class="xuan-status" style="color: #FF4B4B;" v-if="item.status==1">审核中</view>
					<view class="xuan-status" style="color: #0694ef;" v-if="item.status==2">审核通过</view>
					<view class="xuan-status" style="color: #FF4B4B;" v-if="item.status==3">拒绝审核</view>
					<view class="xuan-info" @tap.stop="goinfo(item)">></view>
				</view>
				<view class="place-btn mt" @tap="addShop('enterprise')">新增门店</view>
			</view>
		</view>
		<view class="place">
			<view class="place-top">
				<view class="place-start">
					开始日
					<picker class="picker" mode="date" :value="startDay" :start="startDate" :end="endDate" @change="startDayChange">
						<view class="uni-input">{{startDay}}</view>
					</picker>
				</view>
				<view class="place-text">共{{num}}天</view>
				<view class="place-end">
					结束日
					<picker class="picker" mode="date" :value="endDay" :start="startDate" :end="endDate" @change="endDayChange">
						<view class="uni-input">{{endDay}}</view>
					</picker>
				</view>
			</view>
			<view class="place-btn" v-if="hotelData.loin&&isAdd" @tap="nowAdd()">立即下单</view>
			<view class="place-btn none" v-else>立即下单</view>
		</view>
		<view class="uni-margin-wrap uni-radius-lg">
		  <swiper
		    class="swiper"
		    circular
		    :indicator-dots="indicatorDots"
		    :autoplay="autoplay"
		    :interval="interval"
		    :duration="duration"
		  >
		    <swiper-item :key="item.id" v-for="item in carouselData">
		      <view class="swiper-item">
		        <image :src="item.cover[0]" mode="" style="width: 100%; height: 100%" @click="imgClick('report')"></image>
		      </view>
		    </swiper-item>
		  </swiper>
		</view>
		<!-- 合作酒店 -->
		<view class="cooperation">
			<view class="cooperation-top">
				<image src="/static/imgas/jiudian.png" mode=""></image>
				合作酒店
				<view class="cooperation-more" @tap="more">查看更多 ></view>
			</view>
			<view style="height: 300rpx;overflow: hidden;">
				<WFscroll :listAr="hotelList" :scrollHeight="lineHeight" :scrollTimer="animationScroll"></WFscroll>
			</view>
			<!-- <view v-for="(item,index) in hotelList" :key="index" class="cooperation-item">
				{{index+1}}丶{{item.hotel_name}}
			</view> -->
		</view>
		
		<uni-popup ref="popup" @change="change" :mask-click="false">
			<view class="popup">
				<view class="popup-img">
					<image class="img" :src="imgUrl" mode=""></image>
					<view class="popup-text">
						<view class="text">企业认证</view>
						<view class="text1">您还未进行企业实名认证</view>
						<view class="text1">认证成功后</view>
						<view class="text1">即可开启更多服务</view>
						<view class="but">
							<button class="butt" plain @click="renzheng('enterprise')">立即认证</button>
						</view>
					</view>
				</view>
				<uni-icons class="ionc" type="close" size="68r" @click="close"></uni-icons>
			</view>
		</uni-popup>
		<uni-popup ref="popup1" @change="change1" :mask-click="false">
			<view class="get-tel">
				<uni-icons class="ionc" type="closeempty" size="50r" @click="goBack"></uni-icons>
				<view class="tel-title">
					提示
				</view>
				<view class="tel-text">您未绑定手机号，需要绑定手机号才可体验更多功能</view>
				<view class="but">
					<button class="butt" plain open-type="getPhoneNumber"
						@getphonenumber="decryptPhoneNumber">绑定手机号</button>
				</view>
			</view>
		</uni-popup>
		<!-- 客服 -->
		<button class="service-btn" type="default" open-type="contact" style="border-style: none;padding: 0;border-radius: 0;background-color: rgba(0,0,0,0);">
		    <image src="/static/imgas/kefu.png" mode="aspectFill"></image>
		</button>
		<!-- <view class="service-btn" @tap="isShow = !isShow">
			<image src="/static/imgas/kefu.png" mode="" v-if="!isShow"></image>
			<image src="/static/imgas/close.png" mode="" v-else></image>
		</view> -->
		<!-- <view class="service" v-if="isShow">
			<view style="flex: 1;" @tap="isShow = false"></view>
			<view class="service-box">
				<view v-for="(item,index) in serviceList" :key="index" class="service-box-item">
					<image :src="item.img" mode=""></image>
					<view class="">{{item.title}}</view>
				</view>
			</view>
			<view class="sanjiao"></view>
		</view> -->
	</view>
</template>

<script>
	import WFscroll from '@/components/WF-scroll/WF-scroll.vue';
	export default {
		components:{
			WFscroll
		},
		data() {
			const currentDate = this.getDate({
			    format: true
			})
			return {
				showNum: 5,
				lineHeight: 300,
				animationScroll: 800,
				animation: 2000,
				imgUrl: `${getApp().globalData.imgScr}jd/rengzheng.png`,
				wrz: `${getApp().globalData.imgScr}jd/wrz.png`,
				rzz: `${getApp().globalData.imgScr}jd/rzz.png`,
				yrz: `${getApp().globalData.imgScr}jd/yrz.png`,
				imgUrl3: `${getApp().globalData.imgScr}jd/uimg.svg`,
				url: '/hotelAdmin/my', // 页面跳转公共的地址
				hotelData: uni.getStorageSync('hotelData') || {}, // 酒店请求缓存信息
				hotelList: [],
				startDay: currentDate,
				endDay: currentDate,
				num: 1,
				time: Date.parse(currentDate) / 1000,
				startTime: Date.parse(currentDate) / 1000,
				endTime: Date.parse(currentDate) / 1000,
				isShow: false,
				carouselData: [],
				serviceList: [
					{img:'/static/imgas/lianxikefu.png',title:'联系客服'},  
					{img:'/static/imgas/jinjianzhiqun.png',title:'进兼职群'},  
					{img:'/static/imgas/chengweidaili.png',title:'成为代理'},  
				],
				HoList: [],
				isXuan: false,
				active: 0,
				isAdd: false
			};
		},
		computed: {
		    startDate() {
		        return this.getDate('start');
		    },
		    endDate() {
		        return this.getDate('end');
		    }
		},
		 onShow() {
			 
			let _this = this
			
			let hotelData = uni.getStorageSync('hotelData')
			try {
				// 判断登录状态
				if (uni.getStorageSync('hotelData').loin) {
					
					if (!hotelData.phone) return uni.hideTabBar({
						animation: true,
						success: function() {
							_this.$refs.popup1.open('center')
						}
					})
					// let rep = await this.$http.post('/index/Hotelpersonal/hotelinfo')
					// this.$set(this.hotelData, 'state', rep.status) // 酒店认证状态
					if (rep.status == 3) this.$refs.popup.open('center')
					// await this.userinfo()
					// // 显示底部tabs 栏
					// uni.showTabBar({
					// 	animation:true
					// })
				} else {
					//如果未登录 清空本地缓存 重新登录
					uni.removeStorageSync('hotelData');
					uni.removeStorageSync('openid');
					this.hotelData = {}
				}
			} catch (e) {
				//TODO handle the exception
				if (e.statusCode == 1003) {
					setTimeout(function() {
						uni.hideTabBar({
							animation: true,
							success: function() {
								_this.$set(_this.hotelData, 'state', 3)
								console.log('酒店认证状态 ===>', _this.hotelData)
								// uni.setStorageSync('hotelData', _this.hotelData);
								uni.setStorage({
									key: 'hotelData',
									data: _this.hotelData,
									success: function() {
										console.log('success');
									}
								});
								_this.$refs.popup.open('center')
							}
						})
					}, 100);
				} else {
					Object.assign(this.$data, this.$options.data())
					uni.showToast({
						title: e.errMsg,
						icon: "none"
					})
				}
			}
			this.getHolist()
			this.getHotelList()
			this.getCarouse()
		},
		onLoad() {
			getApp().globalData.type = 1
		},
		onPullDownRefresh() {
			// 下拉刷新时触发
			console.log('refresh');
			setTimeout(function() {
				uni.showToast({
					title: "刷新成功",
					icon: "none"
				})
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			more() {
				uni.navigateTo({
					url: "/hotelAdmin/cooperationHotel/cooperationHotel"
				})
			},
			nowAdd(){
				uni.navigateTo({
					url: "/hotelAdmin/home/add-order/add-order?startDay="+ this.startDay+'&endDay='+this.endDay+ '&num='+this.num + '&active='+this.active
				})
			},
			cut(i){
				if(this.HoList[i].status!==2){
					uni.showToast({
						title: '该酒店暂未审核通过',
						icon: 'none'
					})
					return
				}
				this.active = i
				this.isXuan = false
			},
			addShop(path){
				// if(this.HoList[this.active].status!==2){
				// 	uni.showToast({
				// 		title: '该酒店暂未审核通过',
				// 		icon: 'none'
				// 	})
				// 	return
				// }
				uni.navigateTo({
					url: `${this.url}/${path}/${path}`,
				});
			},
			startDayChange(e){
				let time = Date.parse(e.detail.value) / 1000
				if(time<this.time){
					uni.showToast({
						title: '当前日期不可选择',
						icon: 'none'
					})
					return
				}
				if(this.endTime<time){
					this.endTime = time
					this.endDay = e.detail.value
				}
				this.startTime = time
				this.startDay = e.detail.value
				this.getNum()
			},
			endDayChange(e){
				let time = Date.parse(e.detail.value) / 1000
				if(time<this.time){
					uni.showToast({
						title: '当前日期不可选择',
						icon: 'none'
					})
					return
				}
				if(this.startTime>time){
					uni.showToast({
						title: '日期选择至少选择一天',
						icon: 'none'
					})
					return
				}
				this.endTime = time
				this.endDay = e.detail.value
				this.getNum()
			},
			getNum(){
				let num = this.endTime  / 86400 - this.startTime  / 86400
				this.num = num + 1
			},
			goinfo(item){
				uni.navigateTo({
					url: '/hotelAdmin/my/enterprise/enterprise?id=' + item.id
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			// 合作酒店列表
			getHotelList() {
				const params = {
					cate: 2,
					page: 1,
					limit: 15
				}
				this.$http.get('/index/Hotelindex/hotel_list', params).then(res => {
					this.hotelList = res.data
				}).catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			},
			/**
			 * 修改个人信息
			 * @param {Object} path 跳转的页面地址
			 */
			setClick(path) {
				uni.navigateTo({
					url: `${this.url}/${path}/${path}`,
				});
			},
			/**
			 * 企业认证 弹窗状态发生变化时触发
			 * @param {Object} e 弹窗状态的数据
			 */
			change: function(e) {
				console.log(e)
			},
			/**
			 * 企业认证 关闭弹窗的方法
			 */
			close: function() {
				this.$refs.popup.close('center')
				uni.showTabBar({
					animation: true
				})
			},
			/**
			 * 获取手机号权限 弹窗状态发生变化时触发
			 * @param {Object} e 弹窗状态的数据
			 */
			// change1: function(e) {
			// 	console.log(e)
			// },
			/**
			 * 立即认证按钮 事件
			 * @param {string} path 需要跳转的页面路径
			 */
			renzheng: function(path) {
				this.$refs.popup.close('center')
				uni.showTabBar({
					animation: true
				})
				uni.navigateTo({
					url: `${this.url}/${path}/${path}`,
				});
			},
			/**
			 * 立即登录 触发事件
			 */
			async loinClick() {
				let _this = this
				try {
					let res = await uni.getUserProfile({
						desc: '用于小程序功能使用'
					})
					if (res[0] != null) throw new Error(JSON.stringify(res[0]))
					await this.login(res[1].userInfo)
					// 获取酒店信息
					// let hotelinfo = await this.$http.post('/index/Hotelpersonal/hotelist')
					// console.log('酒店信息', hotelinfo);
					// this.$set(this.hotelData, 'state', hotelinfo.status) // 酒店认证状态
					// this.$set(this.hotelData, 'hotel_name', hotelinfo.hotel_name) // 酒店认证状态
					// this.fund[0].money = hotelinfo.balance // 账户余额
					// this.fund[1].money = hotelinfo.bond // 保证金余额
					// uni.setStorageSync('hotelData', this.hotelData);
					
				} catch (e) {
					if (e.message && JSON.parse(e.message).statusCode) {
						if (JSON.parse(e.message).statusCode == 1004) {
							// 未绑定手机号时 弹出绑定提示框
							uni.hideTabBar({
								animation: true,
								success: function() {
									_this.$refs.popup1.open('center')
								}
							})
						} else if (JSON.parse(e.message).statusCode == 1003) {
							// 未认证酒店 弹出认证提示框
							uni.hideTabBar({
								animation: true,
								success: function() {
									_this.$refs.popup.open('center')
								}
							})
						} else {
							uni.showToast({
								title: JSON.parse(e.message).errMsg,
								icon: 'none',
							})
						}
					} else if (e.statusCode) {
						if (e.statusCode == 1004) {
							// 未绑定手机号时 弹出绑定提示框
							uni.hideTabBar({
								animation: true,
								success: function() {
									_this.$refs.popup1.open('center')
								}
							})
						} else if (e.statusCode == 1003) {
							// 未认证酒店 弹出认证提示框
							uni.hideTabBar({
								animation: true,
								success: function() {
									_this.$refs.popup.open('center')
								}
							})
						} else {
							uni.showToast({
								title: e.errMsg,
								icon: 'none',
							})
						}
					} else {
						uni.showToast({
							title: e.errMsg,
							icon: "none"
						})
					}
				}
			},
			/**
			 * 微信登录
			 * @param {Object} info 授权成功获取的用户信息
			 */
			async login(info) {
				let _this = this
				uni.showLoading({
					title: '登录中....'
				})
				try {
					/** === 1.wx获取登录用户code === */
					let res = await uni.login({
						provider: 'weixin'
					})
					// 判断是否登录成功
					if (res[0] != null) throw new Error(JSON.stringify(res[0]))
					// 获取code
					let code = res[1].code
					/** === 2.wx获取登录用户openid 等信息 === */
					let rep = await _this.$http.post('/index/Login/getuserinfo', {
						code
					})
					// 保存session_key  用于手机号获取解密 
					this.$set(this.hotelData, 'session', rep.session_key)
					// 保存 openid
					this.$set(this.hotelData, 'openid', rep.openid)
					uni.setStorageSync('openid', rep.openid);
					/** === 3.请求获取 token === */
					await this.getuid(info, rep.openid, rep.unionid)

					/** === 4.请求获取 手机号 === */
					let reo = await this.$http.post('/index/Login/getphone')
					console.log('用户手机号', reo.phone)
					// 保存用户手机
					this.$set(this.hotelData, 'phone', reo.phone)

					// 本地同步缓存 登录获取的相关信息
					uni.setStorageSync('hotelData', this.hotelData);
					this.getHolist()
					this.getHotelList()
				} catch (e) {
					uni.hideLoading()
					//TODO handle the exception
					throw new Error(JSON.stringify(e))
				}
				uni.hideLoading()
			},
			/**
			 * 获取 token
			 */
			async getuid(info, openid, unionid) {
				try {
					let res = await this.$http.post('/index/Login/getuid', {
						openid: openid,
						unionid: unionid,
						parent_openid: uni.getStorageSync('parent_openid') || '',
						type: 1,
						userInfo: {
							nickname: info.nickName,
							avatar: info.avatarUrl,
							gender: info.gender,
						}
					})
					// 保存token
					this.$set(this.hotelData, 'token', res.token)
					// 缓存token 到本地
					uni.setStorageSync('hotelData', this.hotelData);
					// 获取用户信息
					await this.userinfo()
				} catch (e) {
					console.log('获取数据失败2', e)
					throw new Error(e)
				}
			},
			/**
			 * 获取用户信息 
			 */
			async userinfo() {
				try {
					let res = await this.$http.post('/index/Login/userinfo')
					this.$set(this.hotelData, 'nickname', res.nickname) // 昵称
					this.$set(this.hotelData, 'avatar', res.avatar) // 头像
					this.$set(this.hotelData, 'gender', res.gender) // 性别
					this.$set(this.hotelData, 'phone', res.phone) // 电话 
					this.$set(this.hotelData, 'loin', true) // 更改登录状态
					this.$set(this.hotelData, 'admin', res.is_hotel_admin) // 管理状态
					this.$set(this.hotelData, 'wxopenid', res.wxopenid) // 微信公众openid
					this.$set(this.hotelData, 'hotel_id', res.hotel_id) // 微信公众openid
					this.$set(this.hotelData, 'real_name', res.real_name) // 微信公众openid
					uni.setStorageSync('hotelData', this.hotelData);
				} catch (e) {
					console.log('获取数据失败3', e)
					throw new Error(e)
				}
			},
			getHolist(){
				const params = {
					
				}
				this.$http.post('/index/Hotelpersonal/hotellist', params).then(res => {
					let num = res.length
					if(num>0){
						this.isAdd = true
					}else{
						this.isAdd = false
					}
					this.HoList = res
					
				}).catch(res => {
					uni.hideLoading()
					uni.showToast({
						title: res.errMsg,
						icon: "none"
					})
				})
			},
			/**
			 * 获取手机号权限 弹窗状态发生变化时触发
			 * @param {Object} e 弹窗状态的数据
			 */
			change1: function(e) {
				console.log(e)
			},
			getCarouse() {
			  let _this = this;
			  this.$http
			    .get("/index/Communal/banner", {
			      cate: 1,
			    })
			    .then(function (res) {
			      _this.carouselData = res;
			    })
			    .catch(function (e) {
			      throw new Error(e);
			    });
			},
			/**
			 * 绑定手机号弹窗 关闭返回首页
			 */
			goBack() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
				uni.removeStorageSync('hotelData');
				uni.removeStorageSync('openid');
				this.$refs.popup1.close('center')
			},
			/**
			 * 认证手机号 按钮触发事件
			 *  @param {Object} e 手机认证成功后返回的数据
			 */
			async decryptPhoneNumber(e) {
				console.log(e)
				// 请求参数
				let data = {
					session: this.hotelData.session,
					iv: e.target.iv,
					encryptedData: e.target.encryptedData
				}
				try {
					// 获取用户手机号码
					let res = await this.$http.post('/index/Login/decryptphone', data)
					console.log('成功后2', res);
					// 保存用户手机
					this.hotelData.phone = res.phoneNumber

					// 将手机号码发送到服务器
					let phoneData = await this.$http.post('/index/Login/updatephone', {
						phone: res.phoneNumber
					})
					// 关闭 绑定手机号弹窗
					this.$refs.popup1.close('center')
					// 同步保存数据到本地 token 登录状态 认证状态 手机号
					uni.setStorageSync('hotelData', this.hotelData);

					// 判断是否弹出个人认证窗口
					this.$refs.popup.open('center')

				} catch (e) {
					console.log('获取数据失败4', e)
					// 拒绝后返回手机认证弹窗
					// this.hotelData = {};
					// uni.removeStorageSync('hotelData');
					// uni.removeStorageSync('openid');
					// return
				}
			},
			openClick() {
				console.log('123')
				uni.navigateTo({
					url: '../../../hotelAdmin/SinglepageHotel/SinglepageHotel'
				});
			},
		}
	}
</script>

<style lang="scss">
	.my {
		position: relative;
		margin-bottom: 20rpx;

		.uni-list {
			background-color: rgba($color: #000000, $alpha: 0);
		}

		.uni-list-item {
			background-color: rgba($color: #000000, $alpha: 0);
		}

		.my-title {
			width: 100%;
			height: 280rpx;
		    background: #8dc9f1;
			// background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
		}

		.my-title-info {
			.slot-box {
				width: 120rpx;
				height: 120rpx;
				border-radius: 60rpx;
				margin-right: 40rpx;
				overflow: hidden;

				.slot-main-image {
					width: 100%;
					height: 100%;
				}
			}

			.slot-main {
				display: flex;
				flex-direction: column;
				justify-content: center;
				width: 100%;
				position: relative;
				&-shouquan {
					display: flex;
				}

				.shouquan {
					font-size: 28rpx;
					font-weight: 500;
					color: #fff;
				}

				.slot-main-name {
					font-size: 34rpx;
					color: #000;
					margin-bottom: 20rpx;
				}

				.slot-main-score {
					font-size: 28rpx;
					color: #000;
					margin-right: 20rpx;
					overflow: hidden;
					white-space: nowrap; /* 防止文字换行 */
					text-overflow: ellipsis;
					.img-14 {
						width: 20rpx;
						height: 20rpx;
						margin-left: 6rpx;
					}
				}

				.but {
					font-size: 34rpx;
					// width: 560rpx;
					font-weight: 600;
					color: #000;
					background-color: rgba($color: #000000, $alpha: 0);
					border-radius: 48rpx;
					line-height: 96rpx;
					padding: 0 20rpx;
					border: 0;
				}

				.but::after {
					display: none;
				}
			}
		}

		.m-title-con {
			position: relative;
			width: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;

			.money {
				display: flex;
				align-items: center;

				.balance {
					flex: 1;
					display: flex;
					height: 150rpx;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					background-color: #ffffff;
					border-radius: 20rpx 20rpx 0 0;
					margin: 10rpx;
					z-index: 2;
					color: #000000;

					.text1 {
						font-size: 30rpx;
						margin-bottom: 10rpx;
						font-weight: 600;

						.text2 {
							font-size: 40rpx;
						}
					}

					.text3 {
						font-size: 24rpx;
						color: rgba($color: #000000, $alpha: 0.7);
					}
				}
			}

			.dins {
				position: absolute;
				left: 0;
				bottom: 0;
				box-sizing: border-box;
				height: 18rpx;
				width: 100%;
				padding: 0 15rpx;
				z-index: 0;

				.box {
					height: 100%;
					width: 100%;
					background: linear-gradient(-90deg, #15AC66, #2CCD7F);
					border-radius: 9rpx;
				}
			}
		}

		.my-main {
			width: 100%;
			background-color: #ffffff;
			border-radius: 40rpx;
			z-index: 4;
			margin-top: -40rpx;
			overflow: hidden;

			.main-img {
				.img-1 {
					width: 53rpx;
					height: 60rpx;
					background-color: rgba($color: #000000, $alpha: 0);
				}
			}

			.main-body {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-left: 20rpx;

				.slot-main-title {
					font-size: 28rpx;
					color: #000000;
					font-weight: 500;
				}

				.img-ioc {
					display: flex;
					align-items: center;

					.img-2 {
						width: 104rpx;
						height: 34rpx;
						background-color: rgba($color: #000000, $alpha: 0);
					}
				}

			}
		}

		.popup {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;

			.popup-img {
				position: relative;
				width: 508rpx;
				height: 670rpx;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 60rpx;

				.img {
					width: 100%;
					height: 100%;
				}

				.popup-text {
					position: absolute;
					bottom: 0;
					left: 0;
					width: 100%;

					.text {
						font-size: 54rpx;
						font-weight: bold;
						color: #000000;
						margin-bottom: 100rpx;
						padding-left: 40rpx;
					}

					.text1 {
						font-size: 28rpx;
						color: #000000;
						padding-left: 40rpx;
					}

					.but {
						display: flex;
						justify-content: center;
						width: 100%;
						margin: 100rpx 0 80rpx;

						.butt {
							width: 70%;
							color: #FFFFFF;
							background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
							border-radius: 40rpx;
							line-height: 80rpx;
							border: 0;
							margin: 0 20rpx;
						}
					}
				}
			}

			.ionc {
				.uni-icons {
					color: rgba($color: #ffffff, $alpha: 0.6) !important;
					font-weight: 100;
				}
			}
		}

		.get-tel {
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			width: 508rpx;
			padding: 40rpx;
			border-radius: 20rpx;
			overflow: hidden;
			background-color: #FFFFFF;

			.ionc {
				position: absolute;
				top: 16rpx;
				right: 16rpx;
			}

			.tel-title {
				font-size: 50rpx;
				color: #000000;
				font-weight: 500;
				margin-bottom: 40rpx;
			}

			.tel-text {
				font-size: 32rpx;
				color: #737373;
				font-weight: 500;
				text-align: center;
			}

			.but {
				display: flex;
				justify-content: center;
				width: 100%;
				margin-top: 100rpx;

				.butt {
					font-size: 40rpx;
					font-weight: 500;
					color: #FFFFFF;
					background: linear-gradient(-90deg, #8dc9f1, #d8eefc);
					border-radius: 40rpx;
					line-height: 80rpx;
					border: 0;
					padding: 0 60rpx;
				}
			}
		}
	}
	.place{
		width: 690rpx;
		height: 342rpx;
		border-radius: 13rpx;
		background-color: #fff;
		margin: 0 auto;
		z-index: 22;
		margin-top: -110rpx;
		padding: 34rpx;
		font-size: 30rpx;
		.place-top{
			display: flex;
			height: 100rpx;
			justify-content: space-between;
			margin-bottom: 60rpx;
			view{
				flex: 1;
			}
			.place-start,
			.place-end{
				text-align: left;
				font-size: 24rpx;
				color: #676767;
				padding-top: 20rpx;
			}
			.picker{
				font-size: 34rpx;
				color: #000;
				font-weight: 600;
				margin-top: 10rpx;
			}
			.place-text{
				text-align: center;
				line-height: 100rpx;
				font-size: 24rpx;
			}
		}
	}
	.place-btn{
		width: 622rpx;
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
		color: #000;
		background: linear-gradient(to right,#8dc9f1,#d8eefc);
		border-radius: 96rpx;
		margin: 0 auto;
		font-size: 36rpx;
		letter-spacing: 2rpx;
	}
	.none{
		background: linear-gradient(to right,#000,#232323);
		color: #fff;
		font-weight: 500;
	}
	.mt{
		margin-top: 40rpx;
	}
	.service-btn{
		position: fixed;
		right: 36rpx;
		bottom: 140rpx;
		z-index: 99999;
		image{
			width: 117rpx;
			height: 117rpx;
		}
	}
	.service-btn::after{
		border: none;
	}
	.service{
		background-color: rgba(0,0,0,0.5);
		position: fixed;
		z-index: 9999;
		width: 100%;
		height: 100vh;
		top: 0;
		left: 0;
		display: flex;
		.sanjiao{
			position: fixed;
			right: 85rpx;
			background-color: #fff;
			width: 40rpx;
			height: 40rpx;
			bottom: 300rpx;
			transform: rotate(45deg);
		}
		.service-box{
			width: 300rpx;
			height: 320rpx;
			position: fixed;
			right: 32rpx;
			bottom: 310rpx;
			background-color: #fff;
			border-radius: 13rpx;
			display: flex;
			flex-direction: column;
			.service-box-item{
				flex: 1;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				padding: 0 40rpx;
				image{
					width: 52rpx;
					height: 48rpx;
					margin-right: 40rpx;
				}
			}
		}
	}
	.cooperation{
		width: 690rpx;
		height: auto;
		padding: 0 32rpx;
		background-color: #fff;
		margin: 0 auto;
		background-color: #fff;
		border-radius: 13rpx;
		padding-bottom: 32rpx;
		.cooperation-top{
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 2rpx solid #E7E7E7;
			align-items: center;
			font-size: 32rpx;
			color: #000;
			image{
				width: 30rpx;
				height: 30rpx;
				margin-right: 18rpx;
			}
		}
		.cooperation-more{
			float: right;
			font-size: 26rpx;
			color: #A2A2A2;
		}
		.cooperation-item{
			height: 70rpx;
			line-height: 70rpx;
			font-size: 26rpx;
			color: #373737;
		}
	}
	.add-new{
		width: 622rpx;
		height: 96rpx;
		text-align: center;
		line-height: 96rpx;
		color: #000;
		border: 2rpx solid #FFFFFF;
		border-radius: 13rpx;
		font-size: 36rpx;
		letter-spacing: 2rpx;
	}
	.cut-btn{
		width: 106rpx;
		height: 64rpx;
		border-radius: 13rpx;
		border: 2rpx solid #000;
		font-size: 26rpx;
		color: #000;
		text-align: center;
		line-height: 64rpx;
	}
	.xuan-box{
		position: absolute;
		left: 0;
		top: 140rpx;
		height: 85vh;
		z-index: 9999;
		background-color: rgba(0,0,0,0.5);
		display: flex;
		width: 100%;
		.xuan-small{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			max-height: 60%;
			overflow-y: auto;
			background-color: #fff;
			border-radius: 0 0 40rpx 40rpx;
			padding: 30rpx;
			.xuan-item{
				height: 174rpx;
				border-bottom: 1rpx solid #EDEDED;
				font-size: 32rpx;
				color: #000;
				display: flex;
				padding-top: 40rpx;
			}
			.xuan-title{
				margin-left: 22rpx;
				flex: 1;
			}
			.xuan-status{
				width: 4em;
				font-size: 26rpx;
				line-height: 154rpx;
			}
			.xuan-address{
				font-size: 26rpx;
				margin-top: 20rpx;
			}
			.xuan-info{
				width: 80rpx;
				text-align: center;
				line-height: 154rpx;
				font-size: 28rpx;
				color: #0694ef;
			}
			.quan{
				width: 26rpx;
				height: 26rpx;
				border-radius: 50%;
				position: relative;
				border: 1rpx solid #C6C6C6;
				top: 10rpx;
			}
			.active{
				border-color: #0694ef;
			}
			.dian{
				width: 9rpx;
				height: 9rpx;
				background-color: #0694ef;
				border-radius: 50%;
				position: absolute;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				margin: auto;
				z-index: 2;
			}
		}
	}
	.uni-margin-wrap {
	  box-sizing: border-box;
	  width: 690rpx;
	  margin: 40rpx auto;
	  overflow: hidden;
	  .swiper {
	    width: 100%;
	    height: 320rpx;
	    .swiper-item {
	      width: 100%;
	      height: 100%;
	      display: block;
	      text-align: center;
	    }
	  }
	}
	.ellipsis1{
		overflow: hidden;
		white-space: nowrap; /* 防止文字换行 */
		text-overflow: ellipsis;
	}
</style>
